<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>四则运算计算器</title>
    <style>
        .container {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="number"], select {
            width: 100%;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 3px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>四则运算计算器</h2>
        <form action="calculator.jsp" method="post">
            <div class="form-group">
                <label for="num1">第一个数字：</label>
                <input type="number" id="num1" name="num1" step="any" required>
            </div>
            <div class="form-group">
                <label for="operator">运算符：</label>
                <select id="operator" name="operator" required>
                    <option value="+">加法 (+)</option>
                    <option value="-">减法 (-)</option>
                    <option value="*">乘法 (×)</option>
                    <option value="/">除法 (÷)</option>
                </select>
            </div>
            <div class="form-group">
                <label for="num2">第二个数字：</label>
                <input type="number" id="num2" name="num2" step="any" required>
            </div>
            <button type="submit">计算</button>
        </form>

        <%
            String num1Str = request.getParameter("num1");
            String num2Str = request.getParameter("num2");
            String operator = request.getParameter("operator");

            if (num1Str != null && num2Str != null && operator != null) {
                try {
                    double num1 = Double.parseDouble(num1Str);
                    double num2 = Double.parseDouble(num2Str);
                    double result = 0;
                    String error = null;

                    switch (operator) {
                        case "+":
                            result = num1 + num2;
                            break;
                        case "-":
                            result = num1 - num2;
                            break;
                        case "*":
                            result = num1 * num2;
                            break;
                        case "/":
                            if (num2 == 0) {
                                error = "除数不能为零！";
                            } else {
                                result = num1 / num2;
                            }
                            break;
                    }

                    if (error != null) {
        %>
                        <div class="result">
                            <p style="color: red;"><%= error %></p>
                        </div>
        <%
                    } else {
        %>
                        <div class="result">
                            <p><%= num1 %> <%= operator %> <%= num2 %> = <%= String.format("%.2f", result) %></p>
                        </div>
        <%
                    }
                } catch (NumberFormatException e) {
        %>
                    <div class="result">
                        <p style="color: red;">请输入有效的数字！</p>
                    </div>
        <%
                }
            }
        %>
    </div>
</body>
</html>